<template>
	<view class="room-page-con">
		<myheader  ref="myheader" ></myheader>
		 <view v-if="showStep == 1" class="my-page-content">
		 	<view class="my-title">设置房屋价格</view>
		 <view  v-for="(item ,index) in formData" :key="index" >
			<view class="my-m-title flex-between">
				<view class="my-input-con">
					<input type="text"  maxlength="50"  @blur="changeName(item, index)" :style="{width: (item.name.length + 1) *30 + 'rpx'}"  class="mr10 my-input"  v-model="item.name"  placeholder="请输入"  />
					<span class="grey-tips"> 点击修改名称</span>
				</view>
				
				 <uni-icons @click="deleteRoom(index)" color="#C4C4C4" class="del" v-if="formData.length > 1" type="trash" size="25"></uni-icons>
				 
			</view>
			<view class="flex-between mb30 ">
				 <view >
					基本信息
				 </view>
				 <view @click="setStep(2, index)" class="f28 ">
					 <span  class="color-orange" v-if="item.beds.length == 0">  
					   去编辑 
					   <uni-icons color="#EC8403" class="my-right-icon color-orange" type="right" size="18"></uni-icons>
				   </span>
					 <span v-else>
						 已完成 
						 <uni-icons class="my-right-icon" type="right" size="18"></uni-icons>
					  </span>
				 </view>
		   </view>
		   <view class="flex-between mb30 ">
					 <view >
						卧室照片
					 </view>
					 <view @click="setStep(3, index)" class="f28 ">
						 <span  class="color-orange" v-if="item.images.length == 0">  
						  去编辑    <uni-icons color="#EC8403" class="my-right-icon color-orange" type="right" size="18"></uni-icons>
						</span>
						 <span v-else>
							 已完成  <uni-icons class="my-right-icon" type="right" size="18"></uni-icons>
						 </span>
					 </view>
		   </view>
		   <view class="flex-between mb30  ">
				 <view >
					出租价格
				 </view>
				 <view @click="setStep(4, index)" class="f28  ">
						<span  class="color-orange" v-if="Number(item.price) == 0 "> 
						 去编辑  <uni-icons color="#EC8403" class="my-right-icon color-orange" type="right" size="18"></uni-icons>
						 </span>
						<span v-else>
							 已完成  <uni-icons class="my-right-icon" type="right" size="18"></uni-icons>
						</span>
				 </view>
		   </view>
		   <view class="flex-between  mb30 ">  
				 <view >
					出租排期
				 </view>
				 <view @click="setStep(5, index)" class="f28  ">
					<span  class="color-orange" v-if="item.date_range.length == 0">  
					  去编辑  <uni-icons color="#EC8403" class="my-right-icon color-orange" type="right" size="18"></uni-icons>
					 </span>
					<span v-else>
						 已完成  <uni-icons class="my-right-icon" type="right" size="18"></uni-icons>
					</span>
				 </view>
		   </view>
		   <van-divider	 :margin="20" />
		</view>
		 <view @click="addRoom" class="clear-yellow-btn">
		 		 添加房间
		 </view>
		 </view>
		 
		 <setRoomInfo :dataItem="formData[currentIndex]" ref="stepRef" v-else-if="showStep == 2"></setRoomInfo>
		 <setRoomImg :dataItem="formData[currentIndex]" ref="stepRef" v-else-if="showStep == 3"></setRoomImg>
		 <computedPrice :dataItem="formData[currentIndex]" ref="stepRef" v-else-if="showStep == 4"></computedPrice>
		 <setHireDate :dataItem="formData[currentIndex]" ref="stepRef" v-else-if="showStep == 5"></setHireDate>
		 
	     <footBtn :btnText="showStep== 1?'下一步': '保存'"  @nextStep="nextStep"></footBtn>
	     <van-dialog confirm-button-class="color-orange" id="van-dialog" />
	</view>
</template>

<script>
	import myheader from '../components/myheader.vue';
	import footBtn from '@/components/myBtn/footBtn.vue'
	import setRoomInfo from './setRoomInfo.vue'
	import setRoomImg from './setRoomImg.vue'
	import setHireDate from './setHireDate.vue'
	import computedPrice from './computedPrice.vue'
	import Dialog from 'wxcomponents/vant/dialog/dialog';
	
	
	export default {
		components:{
			myheader,
			footBtn,
			setRoomInfo,
			setRoomImg,
			setHireDate,
			computedPrice
		},
	
		data() {
			return {
			      houseId: this.$getStorage('houseId'),
				  showStep: 1,
				  headerIndex: 2,
				  currentIndex: 0,
				  formData: [
					  {
						  // id: '',
						  house_id:this.$getStorage('houseId'),
						  name: '房间1',
						  has_bathroom: '',
						  people_count: '',
						  beds: [],
						  images: [],
						  price: '',
						  deposit_key: '',
						  deposit_damage: '',
						  date_range: [],
						  disabled_date_range: [],
					  }
				  ],
			}
		   },
		   onShow() {
		     	this.$refs.myheader.setHeaderIndex(2);
				this.houseId = this.$getStorage('houseId');
		   },
			mounted() {
				this.init();
			},
			 methods: {
				 init() {
					 if(this.houseId) {
						 this.getMyHouseInfo();
					 } 
				 },
				
				getMyHouseInfo() {
					 this.$http.getMyHouseInfo(this.houseId).then(res => {
						 if(res.rooms.length > 0) {
							 this.formData = res.rooms;
						 }
						// Object.keys(this.formData).forEach(key =>{
						// 	if(res[key] || res[key] === 0) {
						// 		this.formData[key] = res[key];
						// 	}
						// })
					 })
				},
				setStep(num, index) {
					this.showStep = num;
					this.currentIndex= index;
    			},
				addRoom() {
					const data =   {
						  house_id: this.houseId,
						  name: '房间' + (this.formData.length + 1),
						  has_bathroom: '',
						  people_count: '',
						  beds: [],
						  images: [],
						  price: '',
						  date_range: '',
						  disabled_date_range: '',
					  };
					this.formData.push(data);
					
				},
					
				deleteRoom(index) {
					Dialog.confirm({
					   title: '提示',
					   message: '是否确定删除该房间',
					 })
					 .then(() => {
						 if(!this.formData[index].id) {
						 	this.formData.splice(index, 1);
							return;
						 }
						 
						 let data = {
							 id:  this.formData[index].id,
							 house_id:  this.formData[index].house_id,
						 }
					    this.$http.deleteRoom(data).then(res=>{
							this.formData.splice(index, 1);
							 // this.$goPage(3, '/pages/index/index');
							 this.$toast('删除成功')
					    });
						   
					 })
					.catch(() => {
							 // on cancel
					});
					
				},
				changeValue(e) {
				    this.formData.has_bathroom=  e.detail;
				},
				changeName(item, index) {
					if(!item.name) {
						this.$toast('房间名字不能为空');
						return;
					};
					this.currentIndex= index;
					this.submit();
				},
				nextStep() {
					let flag = false;
					if(this.showStep == 1) {
						let data = this.checkData();
						data && this.$goPage(1, '/subPublishHouse/notice/setCheckIn');
					} else {
					   let data = this.$refs.stepRef.nextStep();
					   if(data) {
						   this.showStep = 1;
						   this.formData.splice(this.currentIndex, 1, data);
						   this.submit();
					   }
					}
				},
				checkData() {
					let tips = '';
					for(let i=0; i< this.formData.length; i++) {
						let item = this.formData[i];
						if(this.formData[i].beds.length ==  0) {
							tips = `请填写${item.name}床铺信息`;
							break;
						}
						if(this.formData[i].images.length ==  0) {
							tips = `请上传${item.name}卧室照片`;
							break;
						}
						
					}
					if(tips) {
						this.$toast(tips);
						return false
					}
					return true
						
					
				},
				handleData() {
					// let list = [];
					// for(let key in  this.roomTagList) {
					// 	list.push( ...this.roomTagList[key]);
					// }
					// list.push(...this.tagList);
					// this.formData.tags = list.filter(item =>  item.checked);
					
				},
				submit() {
				    // this.handleData();
					this.$http.setRoomInfo(this.formData[this.currentIndex]).then(res=>{
						this.$setStorage('houseId', res.house_id);
						this.houseId = this.$getStorage('houseId');
						this.formData[this.currentIndex].id = res.id;
						this.formData[this.currentIndex].house_id = res.house_id;
					});
				}
			}
	}
</script>

<style lang="scss" >
	.my-input-con {
		display: flex;
		align-items: center;
		.my-input {
			min-width: 120rpx;
			max-width: 450rpx;
		}
	
	}
	
	.van-calendar__day--start,.van-calendar__day--end,.van-calendar__day--multiple-middle,.van-calendar__day--multiple-selected {
			background-color: transparent!important;
			 // text-decoration: line-through;
			 color: #B8B8B8!important;
			 position: relative;
			 &::after {
				 content: '';
				 width: 70%;
				 height: 2px;
				 background-color:#B8B8B8; 
				 position: absolute;
				 top:50%;
				 left:50%;
				 transform: translate(-50%, -50%);
			 }
	}
	.color-orange {
		color: #EC8403!important;
	}
	   
	    
	
  	
</style>